<!--头部公共部分-->
{include file="common/header" /}
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a><cite>排课</cite></a>
      </span>
</div>
<div style="padding:15px;">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span class="x-red">*</span>班级名称</label>
                <div class="layui-input-inline">
                    <input type="text" value="{$class.class_name}" readonly autocomplete="off"
                           placeholder="请输入班级名称" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span class="x-red">*</span>显示方式</label>
                <div class="layui-inline">
                    <input type="radio" lay-filter="t_type" name="t_type" class="layui-input" value="4" title="部门"
                           checked>
                    <input type="radio" lay-filter="t_type" name="t_type" class="layui-input" value="5" title="年级">
                    <input type="radio" lay-filter="t_type" name="t_type" class="layui-input" value="6" title="科目">
                </div>
            </div>
            <div class="layui-inline tbm">
                <label class="layui-form-label"><span class="x-red">*</span>部门</label>
                <div class="layui-input-inline">
                    <select name="t_department_id" lay-filter="t_department_id" lay-search="">
                        <option value=""></option>
                        {volist name="department" id="v"}
                        <option value="{$v.teacher_department}">{$v['teacher_department']}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-inline tnj">
                <label class="layui-form-label"><span class="x-red">*</span>年级</label>
                <div class="layui-input-inline">
                    <select name="t_grade_id" lay-filter="t_grade_id" lay-search="">
                        <option value=""></option>
                        {volist name="grade" id="v"}
                        <option value="{$v.teacher_grade}">{$v['teacher_grade']}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-inline tkm">
                <label class="layui-form-label"><span class="x-red">*</span>科目</label>
                <div class="layui-input-inline">
                    <select name="t_subject_id" lay-filter="t_subject_id" lay-search="">
                        <option value=""></option>
                        {volist name="subject" id="v"}
                        <option value="{$v.teacher_subject}">{$v['teacher_subject']}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span class="x-red">*</span>任课老师</label>
                <div class="layui-input-inline">
                    <select name="t_teacher_id" id="t_teacher_id" lay-verify="required" disabled>
                        <option selected value="{$class.teacher}">{$class.teacher_name}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">显示方式</label>
                <div class="layui-inline">
                    <input type="radio" lay-filter="z_type" name="z_type" class="layui-input" value="7" title="部门"
                           checked>
                    <input type="radio" lay-filter="z_type" name="z_type" class="layui-input" value="8" title="年级">
                    <input type="radio" lay-filter="z_type" name="z_type" class="layui-input" value="9" title="科目">
                </div>
            </div>
            <div class="layui-inline zbm">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-inline">
                    <select name="z_department_id" lay-filter="z_department_id" lay-search="">
                        <option value=""></option>
                        {volist name="department" id="v"}
                        <option value="{$v.teacher_department}">{$v['teacher_department']}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-inline znj">
                <label class="layui-form-label">年级</label>
                <div class="layui-input-inline">
                    <select name="z_grade_id" lay-filter="z_grade_id" lay-search="">
                        <option value=""></option>
                        {volist name="grade" id="v"}
                        <option value="{$v.teacher_grade}">{$v['teacher_grade']}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-inline zkm">
                <label class="layui-form-label">科目</label>
                <div class="layui-input-inline">
                    <select name="z_subject_id" lay-filter="z_subject_id" lay-search="">
                        <option value=""></option>
                        {volist name="subject" id="v"}
                        <option value="{$v.teacher_subject}">{$v['teacher_subject']}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">助教</label>
                <div class="layui-input-inline">
                    <select name="z_teacher_id" id="z_teacher_id" disabled>
                        <option selected value=""></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span class="x-red">*</span>开始日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="class_date" lay-verify="required" id="class_date" autocomplete="off"
                           placeholder="开班日期" class="layui-input class_date">
                </div>
                <div class="layui-form-mid layui-word-aux class_date"></div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span class="x-red">*</span>结束日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="start_date" lay-verify="required" id="start_date" autocomplete="off"
                           placeholder="结业日期" class="layui-input start_date">
                </div>
                <div class="layui-form-mid layui-word-aux start_date"></div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">最多还能排</label>
                <div class="layui-input-inline">
                    <input type="text" value="{$class.project_num}" autocomplete="off" placeholder="不填则按日期排满"
                           class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">次</div>
                <div class="layui-form-mid layui-word-aux dt">已排{$class.already_arranged}次</div>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>上课时间</legend>
        </fieldset>
        <table class="layui-table" id="datalist" lay-filter="Event"></table>
        <script type="text/html" id="barTable">
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        </script>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <!--<a class="layui-btn layui-btn-primary" href="{:url('Grades/lists')}">返回</a>-->
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="hidden" name="class_id" id="class_id" value="{$class.id}"/>
                <input type="hidden" name="class_room" id="class_room" value="{$class.class_room}"/>
                <input type="hidden" id="project_num" value="{$class.project_num}"/>
                <input class="layui-btn layui-btn-normal" lay-submit lay-filter="form" value="立即提交" readonly>
                <a class="layui-btn layui-btn-primary" href="{:url('Grades/lists')}">返回</a>
            </div>
        </div>
    </form>
</div>
<!--底部公共部分-->
{include file="common/footer" /}

<script>
    layui.use(['table', 'jquery','element', 'form', 'layer', 'laydate'], function () {
        let $ = layui.jquery
            , layer = layui.layer
            , element = layui.element
            , table = layui.table
            , laydate = layui.laydate
            , form = layui.form;

        let project_num = $("#project_num").val();
        if (project_num == 0) {
            $(".dt").hide();
        }
        //日期
        laydate.render({
            elem: '.class_date',
            type: 'date'
            ,trigger: 'click'
        });

        //日期
        laydate.render({
            elem: '.start_date',
            type: 'date'
            ,trigger: 'click'
        });

        $('.tbm').show();
        $('.tnj').hide();
        $('.tkm').hide();
        form.on('radio(t_type)', function (data) {
            var data = data.value;//被点击的radio的value值
            if (data == 4) {
                $('.tbm').show();
                $('.tnj').hide();
                $('.tkm').hide();
            } else if (data == 5) {
                $('.tbm').hide();
                $('.tnj').show();
                $('.tkm').hide();
            } else if (data == 6) {
                $('.tbm').hide();
                $('.tnj').hide();
                $('.tkm').show();
            }
        });

        $('.zbm').show();
        $('.znj').hide();
        $('.zkm').hide();
        form.on('radio(z_type)', function (data) {
            var data = data.value;//被点击的radio的value值
            if (data == 7) {
                $('.zbm').show();
                $('.znj').hide();
                $('.zkm').hide();
            } else if (data == 8) {
                $('.zbm').hide();
                $('.znj').show();
                $('.zkm').hide();
            } else if (data == 9) {
                $('.zbm').hide();
                $('.znj').hide();
                $('.zkm').show();
            }
        });

        let class_id = $("#class_id").val();
        let class_room = $("#class_room").val();
        let loading = layer.load();
        //方法级渲染
        let tableIns = table.render({
            elem: '#datalist'
            , url: '{:url("Schooltime/room")}'
            // , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , method: 'POST'
            , where: {'class_id': class_id}
            , loading: true
            , parseData: function (res) { //res 即为原始返回的数据
                if (res.code === 1) {
                    res.code = 0;
                } else {
                    res.code = -1;
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            cols: [[
                // {type: 'checkbox'},
                {field: 'week', title: '星期', align: 'center', edit: 'text'},
                {field: 'start_time', title: '开始时间', align: 'center', edit: 'text'},
                {field: 'end_time', title: '结束时间', align: 'center', edit: 'text'},
                {field: 'class_room', title: '教室', align: 'center'},
                {fixed: 'right', title: '操作', width: 100, align: 'center', toolbar: '#barTable'},
            ]]
            , page: false
            , done: function () {
                layer.close(loading);
            }
        });

        $("#class_date").click(function () {
            let date = $("#class_date").val();
            if (date !== '' || date) {
                $.post('{:url("Grades/getByDate")}', {
                    'date': date
                }, function (result) {
                    if (result.code === 1) {
                        console.log(result.data);
                        $(".class_date").text(result.data);
                    }
                });
            }
        })

        $("#start_date").click(function () {
            let date = $("#start_date").val();
            if (date !== '' || date) {
                $.post('{:url("Grades/getByDate")}', {
                    'date': date
                }, function (result) {
                    if (result.code === 1) {
                        console.log(result.data);
                        $(".start_date").text(result.data);
                    }
                });
            }
        })

        //订单分类选择
        $('.site-demo-active').on('click', function () {
            $('#typeclass').find('button').removeClass('layui-btn-warm');
            $(this).addClass('layui-btn-warm');
            let type = $(this).data('type');
            tableIns.reload({
                where: {
                    'type': type
                }
            });
        });

        //监听工具条
        table.on('tool(Event)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') { //删除
                $.post("{:url('Schooltime/room_del')}", {
                    id: data.id
                }, function (result) {
                    if (result.code === 1) {
                        layer.msg(result.msg, {
                            time: 2000
                        });
                        setTimeout(function () {
                            obj.del(); //删除对应行（tr）的DOM结构
                            location.reload();
                        }, 2000)
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 2000
                        });
                    }
                }, "json")
            }
        });

        table.on('edit(Event)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            if (field === 'week') {
                $.post('{:url("Schooltime/room_edit")}'
                    , {
                        'id': data.id,
                        'class_id': class_id,
                        'class_room': class_room,
                        'start_time': data.start_time,
                        'end_time': data.end_time,
                        'week': value
                    }
                    , function (result) {
                        layer.msg(result.msg);
                        if (result.code === 1) {
                            tableIns.reload();
                        }
                    });
            } else if (field === 'end_time') {
                $.post('{:url("Schooltime/room_edit")}'
                    , {
                        'id': data.id,
                        'class_id': class_id,
                        'class_room': class_room,
                        'start_time': data.start_time,
                        'week': data.week,
                        'end_time': value
                    }
                    , function (result) {
                        layer.msg(result.msg);
                        if (result.code === 1) {
                            tableIns.reload();
                        }
                    });
            } else if (field === 'start_time') {
                $.post('{:url("Schooltime/room_edit")}'
                    , {
                        'id': data.id,
                        'class_id': class_id,
                        'class_room': class_room,
                        'end_time': data.end_time,
                        'week': data.week,
                        'start_time': value
                    }
                    , function (result) {
                        layer.msg(result.msg);
                        if (result.code === 1) {
                            tableIns.reload();
                        }
                    });
            }
        });

        form.on('select(t_department_id)', function (data) {
            let teacher_department = data.value;
            let ehtml = '';
            $.post('{:url("Teacher/getByDepartment")}', {
                'teacher_department': teacher_department
            }, function (response) {
                let data = response.data;
                console.log(data);
                $.each(data, function (index, element) {
                    ehtml += '<option value="' + element.id + '">' + element.teacher_name +
                        '</option>';
                })
                $('#t_teacher_id').html(ehtml);
                if (data) {
                    $('#t_teacher_id').attr('disabled', false);
                } else {
                    $('#t_teacher_id').attr('disabled', true);
                }
                form.render();
            });
        });

        form.on('select(z_department_id)', function (data) {
            var teacher_department = data.value;
            var ehtml = '';
            $.post('{:url("Teacher/getByDepartment")}', {
                'teacher_department': teacher_department
            }, function (response) {
                var data = response.data;
                console.log(data);
                $.each(data, function (index, element) {
                    ehtml += '<option value="' + element.id + '">' + element.teacher_name +
                        '</option>';
                })
                $('#z_teacher_id').html(ehtml);
                if (data) {
                    $('#z_teacher_id').attr('disabled', false);
                } else {
                    $('#z_teacher_id').attr('disabled', true);
                }
                form.render();
            });
        });

        form.on('select(t_grade_id)', function (data) {
            var teacher_grade = data.value;
            var ehtml = '';
            $.post('{:url("Teacher/getByGrade")}', {
                'teacher_grade': teacher_grade
            }, function (response) {
                var data = response.data;
                console.log(data);
                $.each(data, function (index, element) {
                    ehtml += '<option value="' + element.id + '">' + element.teacher_name +
                        '</option>';
                })
                $('#t_teacher_id').html(ehtml);
                if (data) {
                    $('#t_teacher_id').attr('disabled', false);
                } else {
                    $('#t_teacher_id').attr('disabled', true);
                }
                form.render();
            });
        });

        form.on('select(z_grade_id)', function (data) {
            var teacher_grade = data.value;
            var ehtml = '';
            $.post('{:url("Teacher/getByGrade")}', {
                'teacher_grade': teacher_grade
            }, function (response) {
                var data = response.data;
                console.log(data);
                $.each(data, function (index, element) {
                    ehtml += '<option value="' + element.id + '">' + element.teacher_name +
                        '</option>';
                })
                $('#z_teacher_id').html(ehtml);
                if (data) {
                    $('#z_teacher_id').attr('disabled', false);
                } else {
                    $('#z_teacher_id').attr('disabled', true);
                }
                form.render();
            });
        });

        form.on('select(t_subject_id)', function (data) {
            var teacher_subject = data.value;
            var ehtml = '';
            $.post('{:url("Teacher/getBySubject")}', {
                'teacher_subject': teacher_subject
            }, function (response) {
                var data = response.data;
                console.log(data);
                $.each(data, function (index, element) {
                    ehtml += '<option value="' + element.id + '">' + element.teacher_name +
                        '</option>';
                })
                $('#t_teacher_id').html(ehtml);
                if (data) {
                    $('#t_teacher_id').attr('disabled', false);
                } else {
                    $('#t_teacher_id').attr('disabled', true);
                }
                form.render();
            });
        });

        form.on('select(z_subject_id)', function (data) {
            var teacher_subject = data.value;
            var ehtml = '';
            $.post('{:url("Teacher/getBySubject")}', {
                'teacher_subject': teacher_subject
            }, function (response) {
                var data = response.data;
                console.log(data);
                $.each(data, function (index, element) {
                    ehtml += '<option value="' + element.id + '">' + element.teacher_name +
                        '</option>';
                })
                $('#z_teacher_id').html(ehtml);
                if (data) {
                    $('#z_teacher_id').attr('disabled', false);
                } else {
                    $('#z_teacher_id').attr('disabled', true);
                }
                form.render();
            });
        });


        //监听提交
        form.on('submit(form)', function (data) {
            let field = data.field;
            let isLoad;
            $.ajax({
                url: '{:url("Grades/is_arranging")}',
                method: "post",
                data: field,
                beforeSend: function () {
                    isLoad = layer.load(0, {
                        shade: false
                    }); //0代表加载的风格，支持0-2
                },
                success: function (result) {
                    if (result.code === 1) {
                        layer.confirm(result.msg, function (index) {
                            $.ajax({
                                url: '{:url("Grades/arranging")}',
                                method: "post",
                                data: field,
                                beforeSend: function () {
                                    isLoad = layer.load(0, {
                                        shade: false
                                    }); //0代表加载的风格，支持0-2
                                },
                                success: function (result) {
                                    layer.msg(result.msg);
                                    if (result.code === 1) {
                                       location.href = result.url;
                                    }
                                },
                                complete: function () {
                                    layer.close(isLoad)
                                },
                                error: function (error) {
                                    console.log(error)
                                }
                            });
                        });
                    } else {
                        layer.msg(result.msg);
                    }
                }
            });
            return false;
        });
    });
</script>